<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/xhtml">
<head th:fragment="commonlinks(title,links)">
    <!--    <meta charset="UTF-8">-->
    <!--    <title>头部公共部分</title>-->
    <title th:replace="${title}">The awesome application</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Tell the browser to be responsive to screen width -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/adminlte.css}">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" th:href="@{/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}">
    <link rel="stylesheet" th:href="@{/dist/css/toast.css}">

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">


    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" th:href="@{/plugins/icheck-bootstrap/icheck-bootstrap.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
    <th:block th:replace="${links}"/>
</head>
<body>
<div th:fragment="topnavbar">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a th:href="@{/unAuthorize/index}" class="nav-link">博客首页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="javascript:location.reload();" class="nav-link refresh">刷新</a>
            </li>
        </ul>

        <!-- 搜索框 -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="文章标题" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item" sec:authorize="isAnonymous()">
                <a class="nav-link" data-slide="true" th:href="@{/unAuthorize/login}" role="button"><i
                        class="fas fa-th-large">登录/注册</i></a>
            </li>
            <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                <a sec:authorize="hasRole('ROLE_admin')" class="nav-link" data-toggle="dropdown" href="#">
                    管理员
                    <!--<i class="far fa-comments"></i>-->
                </a>
                <a sec:authorize="hasRole('ROLE_common')" class="nav-link" data-toggle="dropdown" href="#">
                    普通用户
                    <!--<i class="far fa-comments"></i>-->
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <!--<span class="dropdown-item dropdown-header">15 Notifications</span>-->
                    <div class="dropdown-divider"></div>
                    <a th:href="@{/home/index}" class="dropdown-item">
                        <i class="fas fa-users mr-2 align-middle"></i> 个人中心
                    </a>
                    <div class="dropdown-divider"></div>
                    <a th:href="@{/unAuthorize/torecoverpassword}" class="dropdown-item">
                        <i class="fas fa-users mr-2 align-middle"></i> 更改密码
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item" style="align-items: center;display: flex;">
                        <i class="fas fa-file mr-2"></i>
                        <form class="ml-1" th:action="@{/logout}" method="post">
                            <input type="submit" th:value="注销">
                        </form>
                    </a>
                    <div class="dropdown-divider"></div>
                    <span class="dropdown-item dropdown-footer">傻逼</span>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
                        class="fas fa-th-large"></i></a>
            </li>
        </ul>
    </nav>
</div>
<div th:fragment="topnavbar-md">
    <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
        <div class="container">
            <a href="#" class="navbar-brand">
                <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo"
                     class="brand-image img-circle elevation-3"
                     style="opacity: .8">
                <span class="brand-text font-weight-light">IT技术博客管理系统</span>
            </a>

            <button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse order-3" id="navbarCollapse">
                <!-- Left navbar links -->
                <ul class="navbar-nav">
                    <!--<li class="nav-item">-->
                    <!--<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>-->
                    <!--</li>-->
                    <li class="nav-item">
                        <a th:href="@{/unAuthorize/index}" class="nav-link">博客主页</a>
                    </li>

                </ul>

                <!-- SEARCH FORM -->
                <form class="form-inline ml-0 ml-md-3">
                    <div class="input-group input-group-sm">
                        <input class="form-control form-control-navbar" type="search" placeholder="文章标题"
                               aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-navbar" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Right navbar links -->
            <ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
                <li class="nav-item" sec:authorize="isAnonymous()">
                    <a class="nav-link" data-slide="true" th:href="@{/unAuthorize/login}" role="button"><i
                            class="fas fa-th-large">登录/注册</i></a>
                </li>
                <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                    <a sec:authorize="hasRole('ROLE_admin')" class="nav-link" data-toggle="dropdown" href="#">
                        管理员
                        <!--<i class="far fa-comments"></i>-->
                    </a>
                    <a sec:authorize="hasRole('ROLE_common')" class="nav-link" data-toggle="dropdown" href="#">
                        普通用户
                        <!--<i class="far fa-comments"></i>-->
                    </a>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                        <!--<span class="dropdown-item dropdown-header">15 Notifications</span>-->
                        <div class="dropdown-divider"></div>
                        <a th:href="@{/home/index}" class="dropdown-item">
                            <i class="fas fa-users mr-2 align-middle"></i> 个人中心
                        </a>
                        <div class="dropdown-divider"></div>
                        <a th:href="@{/unAuthorize/torecoverpassword}" class="dropdown-item">
                            <i class="fas fa-users mr-2 align-middle"></i> 更改密码
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item" style="display: flex;align-items: center">
                            <i class="fas fa-file mr-2"></i>
                            <form th:action="@{/logout}" method="post">
                                <input type="submit" th:value="注销">
                            </form>
                        </a>
                        <div class="dropdown-divider"></div>
                        <span class="dropdown-item dropdown-footer">傻逼</span>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
                            class="fas fa-th-large"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div th:fragment="leftaside(activename)">
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="/unAuthorize/index" class="brand-link">
            <img th:src="@{/dist/img/AdminLTELogo.png}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">IT技术博客管理系统</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img th:src="@{${#authentication.principal.loginUser.img}}" class="img-circle elevation-2"
                         alt="User Image">
                </div>
                <div class="info">
                    <!--sec:authentication="principal.username"-->
                    <a href="#" class="d-block" th:text="${#authentication.principal.username}"><span></span></a>

                </div>
            </div>
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <!-- <li class="nav-item has-treeview menu-open">
                      <a href="#" class="nav-link active">
                        <i class="nav-icon fas fa-tachometer-alt"></i>
                        <p>
                          Starter Pages
                          <i class="right fas fa-angle-left"></i>
                        </p>
                      </a>
                      <ul class="nav nav-treeview">
                        <li class="nav-item">
                          <a href="#" class="nav-link active">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Active Page</p>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a href="#" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Inactive Page</p>
                          </a>
                        </li>
                      </ul>
                    </li> -->
                    <!--                    首页-->
                    <li sec:authorize="hasRole('ROLE_home_item')" class="nav-item ">
                        <a th:href="@{/home/index}" th:class="${activename=='home'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                首页
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    markdown-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_editor_item')">
                        <a th:href="@{/editor/index}" th:class="${activename=='editor'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                markdown编辑器
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    个人资料-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_user_item')">
                        <a th:href="@{/user/index}" th:class="${activename=='user'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                个人资料
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    用户管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_user_manage_item')">
                        <a th:href="@{/userManage/index}"
                           th:class="${activename=='userManage'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                用户管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    权限管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_authority_manage_item')">
                        <a th:href="@{/authorityManage/index}"
                           th:class="${activename=='authorityManage'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                权限管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    我关注的人-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_following_item')">
                        <a th:href="@{/following/index}"
                           th:class="${activename=='following'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                我关注的人
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    我的粉丝-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_followed_item')">
                        <a th:href="@{/followed/index}"
                           th:class="${activename=='followed'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                我的粉丝
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    文章管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_article_item')">
                        <a th:href="@{/article/index}" th:class="${activename=='article'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                文章管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    评论管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_comment_item')">
                        <a th:href="@{/comment/index}" th:class="${activename=='comment'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                评论管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    分类管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_type_item')">
                        <a th:href="@{/type/index}" th:class="${activename=='type'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                分类管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    收藏夹管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_collect_item')">
                        <a th:href="@{/collectCategories/index}"
                           th:class="${activename=='collectCategories'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                收藏夹管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    公告管理-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_notice_item')">
                        <a th:href="@{/notice/index}" th:class="${activename=='notice'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                公告管理
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>
                    <!--                    数据观星-->
                    <li class="nav-item" sec:authorize="hasRole('ROLE_data_item')">
                        <a th:href="@{/data/index}" th:class="${activename=='data'?'nav-link active':'nav-link'}">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                数据观星
                                <!-- <span class="right badge badge-danger">New</span> -->
                            </p>
                        </a>
                    </li>


                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>
</div>
<div th:fragment="rightaside">
    <aside class="control-sidebar control-sidebar-dark">
    </aside>
</div>

<div th:fragment="commonjs(scripts)">
    <!--所有js必须放在jq下面-->
    <script th:src="@{/plugins/jquery/jquery.min.js}"></script>

    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <script th:src="@{/dist/js/adminlte.js}"></script>
    <!-- Bootstrap 4 -->
    <script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js}"></script>
    <script th:src="@{/dist/js/demo.js}"></script>
    <script th:src="@{/dist/js/toast.js}"></script>
    <!--<script th:src="@{/dist/js/jquery.validate.min.js}"></script>-->
    <!--<script th:src="@{/dist/js/messages_zh.min.js}"></script>-->
    <script>
        $(function () {
            isLogin()
            // createSocket()
        })

        function isLogin() {
            $.ajax({
                url: '/unAuthorize/isLogin',
                type: 'get',
                dataType: "json",
                async: true,
                processData: false,   // 不处理发送的数据
                contentType: false,  // 不设置Content-Type请求头
                success: function (res) {
                    if (res.data === -1) {
                        return;
                    }
                    showMessage()
                    createSocket(res.data)

                    // $.toast({
                    //     title: '通知',
                    //     subtitle: '1秒前',
                    //     content: res.data,
                    //     type: 'info',
                    //     delay: 20000,
                    //     pause_on_hover: false
                    // });
                }
            })
        }

        //显示消息列表
        function showMessage() {
            // getMessageList
            $.ajax({
                url: '/message/getMessageList',
                type: 'get',
                dataType: "json",
                async: true,
                processData: false,   // 不处理发送的数据
                contentType: false,  // 不设置Content-Type请求头
                success: function (res) {
                    // console.log("消息："+res)
                    if (res.data.length === 0) {
                        return;
                    }
                    for (var i = 0; i < res.data.length; i++) {
                        $.toast({
                            title: '通知',
                            subtitle: '1秒前',
                            content: res.data[i].message,
                            type: 'info',
                            delay: 20000,
                            pause_on_hover: false
                        });
                    }
                    updateAllMessageDelete()

                }
            })
        }

        //更改消息为已读
        function updateAllMessageDelete() {
            $.ajax({
                url: '/message/updateMessageDelete',
                type: 'post',
                dataType: "json",
                async: true,
                processData: false,   // 不处理发送的数据
                contentType: false,  // 不设置Content-Type请求头
                success: function (res) {

                }
            })
        }

        //更改一条消息为已读
        function updateByUserIdMessage(id) {
            $.ajax({
                url: '/message/updateMessageDelete?id=' + id,
                type: 'post',
                dataType: "json",
                async: true,
                processData: false,   // 不处理发送的数据
                contentType: false,  // 不设置Content-Type请求头
                success: function (res) {

                }
            })
        }

        //创建socket
        function createSocket(userId) {

            var socket;
            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");
            }
            socket = new WebSocket("ws://localhost:8088/websocket/{" + userId + "}");
            //打开事件
            socket.onopen = function () {
                // $.toast({
                //     title: '通知',
                //     subtitle: '1秒前',
                //     content: "用户id:"+userId+"已建立连接",
                //     type: 'info',
                //     delay: 20000,
                //     pause_on_hover: false
                // });
                console.log("Socket 已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                console.log(msg.data);
                var obj = JSON.parse(msg.data)
                $.toast({
                    title: '通知',
                    subtitle: '1秒前',
                    content: obj.message,
                    type: 'info',
                    delay: 20000,
                    pause_on_hover: false
                });
                socket.send(obj.id)
                // updateByUserIdMessage(data.id)
                //发现消息进入    调后台获取
                // getCallingList();
            };
            //关闭事件
            socket.onclose = function () {
                $.toast({
                    title: '通知',
                    subtitle: '1秒前',
                    content: "用户id:" + userId + "已关闭连接",
                    type: 'info',
                    delay: 20000,
                    pause_on_hover: false
                });
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                alert("Socket发生了错误");
            }
            // $(window).unload(function(){
            //     socket.close();
            // });


        }


        // 表单异步提交输入框数据校验
        function checkAjaxForm() {
            $(".valid-button").click(function (event) {
                const f = $('.validateForm');  //获取当前对象
                var password1 = $('#password1').val();
                var password2 = $('#password2').val();
                if ($('div').hasClass('equal-validate')) {
                    if (password1 != password2 && password1.length != 0 && password2.length != 0) {
                        $('.equal-validate').text("两次密码不一致");
                        $('.equal-validate').css('display', 'block');
                        // 阻止点击提交按钮时对表单的提交
                        event.preventDefault();
                        // 阻止任何父事件处理程序被执行
                        event.stopPropagation();
                    }
                    if (password1 == password2 && password1.length != 0 && password2.length != 0) {
                        // alert(0);
                        $('.equal-validate').text("两次密码不一致");
                        $('.equal-validate').css('display', 'none');

                    }
                }

                if (f[0].checkValidity() === false) {
                    if ($('div').hasClass('equal-validate')) {
                        if (password1.length == 0 || password2.length == 0) {
                            $('.equal-validate').text("密码不能为空");
                            $('.equal-validate').css('display', 'block');
                        }

                    }

                    // 阻止点击提交按钮时对表单的提交
                    event.preventDefault();
                    // 阻止任何父事件处理程序被执行
                    event.stopPropagation();
                }
                f.addClass("was-validated");
            })
        }

        // 表单同步提交输入框数据校验
        function checkForm() {
            $(".validateForm").submit(function (event) {
                var password1 = $('#password1').val();
                var password2 = $('#password2').val();
                if ($('div').hasClass('equal-validate')) {
                    if (password1 != password2 && password1.length != 0 && password2.length != 0) {
                        $('.equal-validate').text("两次密码不一致");
                        $('.equal-validate').css('display', 'block');
                        // 阻止点击提交按钮时对表单的提交
                        event.preventDefault();
                        // 阻止任何父事件处理程序被执行
                        event.stopPropagation();
                    }
                    if (password1 == password2 && password1.length != 0 && password2.length != 0) {
                        // alert(0);
                        $('.equal-validate').text("两次密码不一致");
                        $('.equal-validate').css('display', 'none');

                    }
                }


                const f = $(".validateForm");  //获取当前对象
                if (f[0].checkValidity() === false) {
                    if ($('div').hasClass('equal-validate')) {
                        if (password1.length == 0 || password2.length == 0) {
                            $('.equal-validate').text("密码不能为空");
                            $('.equal-validate').css('display', 'block');

                        }

                    }

                    // 阻止点击提交按钮时对表单的提交
                    event.preventDefault();
                    // 阻止任何父事件处理程序被执行
                    event.stopPropagation();
                }
                f.addClass("was-validated");
            })
        }

        function refresh() {
            $(".refresh").click(function () {
                $.ajax({
                    url: '/unAuthorize/deleteAllCache',
                    type: 'get',
                    dataType: "json",
                    async: true,
                    processData: false,   // 不处理发送的数据
                    contentType: false,  // 不设置Content-Type请求头
                    success: function (res) {
                        $.toast({
                            title: '通知',
                            subtitle: '1秒前',
                            content: res.data,
                            type: 'info',
                            delay: 20000,
                            pause_on_hover: false
                        });
                    }
                })
            })
        }


        // window.onload = function(){
        //     var b = false;
        //     star();
        //     window.onresize = star;
        //     function star(){
        //         if( b ){
        //             document.body.innerHTML = '';
        //         }
        //         // 1.求出屏幕的尺寸
        //         var screenW = document.documentElement.clientWidth;
        //         var screenH = document.documentElement.clientHeight;
        //
        //         // 2.动态创建星星
        //         for( var i=0; i<1000; i++ ){
        //             // 2.1创建星星
        //             var span = document.createElement('span');
        //             document.getElementById("stars").appendChild(span);
        //             // 2.2随机的坐标
        //             var x = parseInt(Math.random() * screenW);
        //             var y = parseInt(Math.random() * screenH);
        //             span.style.left = x + 'px';
        //             span.style.top = y + 'px';
        //             // 2.3随机缩放
        //             var scale = Math.random() * 1.5;
        //             span.style.transform = 'scale(' + scale + ',' + scale + ')';
        //             // 闪烁推迟
        //             var rate = Math.random() * 1.5;
        //             span.style.animationDelay = rate + 's';
        //         }
        //         b = true;
        //     }
        // }
        // var cvs = document.getElementById("cvs");
        // var ctx = cvs.getContext("2d");
        // var cw = cvs.width = document.body.clientWidth;
        // var ch = cvs.height = document.body.clientHeight;
        // //动画绘制对象
        // var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        // var codeRainArr = []; //代码雨数组
        // var cols = parseInt(cw / 14); //代码雨列数
        // var step = 16;    //步长，每一列内部数字之间的上下间隔
        // ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑
        //
        // function createColorCv() {
        //     //画布基本颜色
        //     ctx.fillStyle = "#242424";
        //     ctx.fillRect(0, 0, cw, ch);
        // }
        //
        // //创建代码雨
        // function createCodeRain() {
        //     for (var n = 0; n < cols; n++) {
        //         var col = [];
        //         //基础位置，为了列与列之间产生错位
        //         var basePos = parseInt(Math.random() * 300);
        //         //随机速度 3~13之间
        //         var speed = parseInt(Math.random() * 10) + 3;
        //         //每组的x轴位置随机产生
        //         var colx = parseInt(Math.random() * cw)
        //
        //         //绿色随机
        //         var rgbr = 0;
        //         var rgbg = parseInt(Math.random() * 255);
        //         var rgbb = 0;
        //         //ctx.fillStyle = "rgb("+r+','+g+','+b+")"
        //
        //         for (var i = 0; i < parseInt(ch / step) / 2; i++) {
        //             var code = {
        //                 x: colx,
        //                 y: -(step * i) - basePos,
        //                 speed: speed,
        //                 //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1
        //                 text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
        //                 color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
        //             }
        //             col.push(code);
        //         }
        //         codeRainArr.push(col);
        //     }
        // }
        //
        // //代码雨下起来
        // function codeRaining() {
        //     //把画布擦干净
        //     ctx.clearRect(0, 0, cw, ch);
        //     //创建有颜色的画布
        //     //createColorCv();
        //     for (var n = 0; n < codeRainArr.length; n++) {
        //         //取出列
        //         col = codeRainArr[n];
        //         //遍历列，画出该列的代码
        //         for (var i = 0; i < col.length; i++) {
        //             var code = col[i];
        //             if (code.y > ch) {
        //                 //如果超出下边界则重置到顶部
        //                 code.y = 0;
        //             } else {
        //                 //匀速降落
        //                 code.y += code.speed;
        //             }
        //
        //             //1 颜色也随机变化
        //             //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 
        //
        //             //2 绿色逐渐变浅
        //             // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 
        //
        //             //3 绿色随机
        //             // var r= 0;
        //             // var g= parseInt(Math.random()*255) + 3;
        //             // var b= 0;
        //             // ctx.fillStyle = "rgb("+r+','+g+','+b+")";
        //
        //             //4 一致绿
        //             ctx.fillStyle = code.color;
        //
        //
        //             //把代码画出来
        //             ctx.fillText(code.text, code.x, code.y);
        //         }
        //     }
        //     requestAnimationFrame(codeRaining);
        // }
        //
        //
        //
        // $(function () {
        //     checkAjaxForm();
        //     checkForm();
        //     refresh();
        //
        //     //创建代码雨
        //     createCodeRain();
        //     //开始下雨吧 GO>>
        //     requestAnimationFrame(codeRaining);
        // })


    </script>
    <th:block th:replace="${scripts}"/>
</div>
</body>
</html>